<template>
  <view class="root_box">
    <view
      class="home_box"
      v-if="!isShowImg"
    >
      <view class="box" />

      <view class="input_box">
        <u-input
          v-model="path"
          type="textarea"
          class="u_input"
          :showWordLimit="false"
        ></u-input>
      </view>

      <view
        class="common_btn label_less"
        @click="path = undefined"
      >
        Clear
      </view>

      <view
        class="common_btn label_less"
        @click="toOpen"
      >
        Open
      </view>
    </view>
    <view
      class="img_box"
      v-else
    >
      <img
        :src="path"
        class="img"
        alt=""
      />
      <view class="btn_box">
        <view
          class="btn"
          @click="toDown"
        >下载</view>
        <view
          class="btn"
          @click="isShowImg = false"
        >返回</view>
      </view>

      <view class="btn_box">
        <view
          class="btn"
          @click="toChange(false)"
        >上一张</view>
        <view
          class="btn"
          @click="toReset"
        >重置</view>
        <view
          class="btn"
          @click="toChange(true)"
        >下一张</view>
      </view>

      <view class="label_path">
        {{ path }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      visible: { show: false },
      isShowImg: false,
      path: "https://p1.amg06.sbs/2023/03/14/20230314093947294081.jpg",
      originalUrl: undefined,
    };
  },
  methods: {
    toOpen() {
      this.originalUrl = this.path;
      this.isShowImg = true;
    },
    toChange(isNext) {
      const tagIndex = this.path.lastIndexOf("/");
      const last = this.path.substring(tagIndex + 1);
      const suffix = last.substring(last.lastIndexOf("."));
      const preffix = last.substring(0, 8);
      const numStr = last.substring(8, last.lastIndexOf("."));
      let num = parseInt(numStr);
      if (isNext) {
        num++;
      } else {
        num--;
      }
      const fisrtZeroNum = numStr.length - `${num}`.length;

      let offset = "";
      for (let index = 0; index < fisrtZeroNum; index++) {
        offset += "0";
      }
      console.log(last, suffix, preffix, numStr, num);
      const url = this.path.substring(0, tagIndex + 1) + preffix + offset + num + suffix;
      console.log(url);
      this.path = url;
    },
    toReset() {
      this.path = this.originalUrl;
    },
    toDown() {
      // 下载图片
      uni.downloadFile({
        url: this.path,
        success: (downloadResult) => {
          if (downloadResult.statusCode === 200) {
            // 下载成功，保存文件
            uni.saveFile({
              tempFilePath: downloadResult.tempFilePath,
              success: (saveResult) => {
                console.log('文件保存成功，文件路径：', saveResult.savedFilePath);
                // 你可以在这里进行进一步操作，比如提示用户文件已保存
              },
              fail: (error) => {
                console.error('文件保存失败：', error);
              }
            });
          } else {
            console.error('下载失败，状态码：', downloadResult.statusCode);
          }
        },
        fail: (error) => {
          console.error('下载失败：', error);
        }
      });

    },
  },
  mounted() { },
  created() { },
};
</script>

<style lang="scss" scoped>
.root_box {
  height: 100vh;
  background: black;
}

.common_btn+.common_btn {
  margin-top: 24rpx;
}

.home_box,
.img_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.box {
  flex: 1;
}

.input_box {}

.img {
  flex: 1;
  object-fit: contain;
  max-height: calc(100% - 64rpx - 64rpx - 36rpx);
}

.btn_box {
  display: flex;
  flex-shrink: 0;
  padding: 12rpx 24rpx;
  z-index: 10;

  .btn {
    flex: 1;
    margin: 0 12rpx;
    background: grey;
    text-align: center;
    line-height: 64rpx;
  }

}

.label_path {
  position: absolute;
  top: 50rpx;
  left: 0;
  color: white;
  word-wrap: break-word;
  word-break: normal;
  white-space: pre-wrap;
  width: 100%;
}
</style>

<style>
.uni-input-input {
  color: white !important;
}
</style>